<template>
  <PDialog :visible="visible" @close="$emit('close')">
    <div class="login">
      <div class="left">
        <transition name="moveL">
          <div v-if="step===0">
            <h2>注册登录</h2>
            <div class="form">
              <el-input class="item" v-model="phone" placeholder="手机号" @keyup.enter.native="getVerfCode()" autofocus></el-input>

              <span class="tips">没有注册过的手机号将自动注册</span>
              <el-button class="btn" type="primary" @click="getVerfCode()">获取验证码</el-button>
              <div class="login-tips">
                继续即代表同意<a href="/scene/agreement" target="_blank">《服务协议》</a>和<a href="/scene/privacy" target="_blank">《隐私政策》</a>
              </div>
            </div>
          </div>
        </transition>

        <transition name="moveL">
          <div v-if="step===1">

            <el-link @click="step=0">上一步</el-link>
            <h2>图像验证码</h2>
            <div class="form">
              <el-row>
                <el-col :span="12">
                  <el-input size="small" class="item" v-model="code" placeholder="图像验证码" @keyup.enter.native="getSmsCode()" autofocus></el-input>
                </el-col>
                <el-col :span="12" style="padding-left: 10px">
                  <el-image style="cursor: pointer;border-radius: 5px;" fit="fill" :src="codeUrl"
                            @click="refreshCode()"></el-image>
                </el-col>
              </el-row>
              <el-button :disabled="loading" class="btn" type="primary" @click="getSmsCode()">获取短信验证码</el-button>

            </div>
          </div>
        </transition>

        <transition name="moveL">
          <div v-if="step===2">
            <el-link @click="step=1">上一步</el-link>
            <h2>短信验证码</h2>
            <div class="form">
              <el-input class="item" v-model="smsCode" placeholder="短信验证码" @keyup.enter.native="loginSubmit()" autofocus>
                <template slot="append">
                  <el-link :disabled="loading" @click="step=1">重新获取</el-link>
                </template>
              </el-input>
              <el-button :loading="loading" class="btn" type="primary" @click="loginSubmit()">点击登录</el-button>

            </div>
          </div>
        </transition>
      </div>

      <div class="right"></div>
    </div>
  </PDialog>
</template>

<script>
import PDialog from "./P-Dialog";
import api from "@/utils/api";
import cookie from "@/utils/cookie";

export default {
  name: "Login",
  props: ['visible'],
  components: {PDialog},
  data() {
    return {
      step: 0,//步骤
      phone: "",
      code: "",
      smsCode: "",
      codeUrl: '',
      uid: '',
      loading: false
    }
  },
  created() {
    this.refreshCode();
  },
  methods: {
    refreshCode() {
      let uid = this.getUid();
      this.uid = uid;

      this.codeUrl = api.getVerfCodeUrl(uid);
    },
    getUid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

        var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    getVerfCode() {
      //弹框 提示输入验证码
      //校验手机号
      if (!this.phone.replace(/ /g, '')) {
        this.$message.error("请输入手机号！");
        return;
      }
      this.step = 1;
    },
    getSmsCode() {
      //获取短信验证码
      let self = this;
      if (!this.code.replace(/ /g, '')) {
        this.$message.error("请输入图像验证码！");
        return;
      }
      self.loading = true;
      api.sendSmsCode(this.uid, this.code, this.phone).then(result => {
        if (result.code === 0) {
          self.$message.error(result.msg);
        } else if (result.code === 1) {
          self.step = 2;
        }
      }).finally(() => self.loading = false);
    },
    loginSubmit() {
      let self = this;
      self.loading = true;
      api.smsLogin(this.phone, this.smsCode).then(data => {
        //登录成功后，用户信息提交到store
        if (data.code === 0) {
          self.$message.error(data.msg);
        } else {
          //登录成功
          self.$store.commit('setUser', data.user);
          //将token放到localStoreage
          cookie.setCookie('token', data.user.token);
          self.$message.success(`登录成功，${data.user.name}`);
          //关闭当前对话框
          self.$emit('close');

        }
      }).finally(() => self.loading = false);
    }
  }
}
</script>

<style scoped lang="less">
.moveL-enter-active,
.moveL-leave-active {
  transition: all 0.3s linear;
  transform: translateX(0%);
}

.moveL-enter,
.moveL-leave {
  transform: translateX(-100%);
}

.moveL-leave-to {
  transform: translateX(-100%);
}

.login {
  display: flex;
  width: 500px;
  height: 300px;

  .form {
    .item {
      margin-bottom: 10px;
    }

    .tips {
      font-size: 12px;
      margin: 10px auto;
    }

    .login-tips, .login-tips a {
      font-size: 12px;
      margin-top: 10px;
    }

    .btn {
      width: 100%;
      margin-top: 10px;
    }
  }

  h2 {
    margin-top: 0;
  }

  .left, .right {
    flex: 1;
  }

  .left {
    padding-right: 20px;
  }

  .right {
    background: url("~/static/img/login_banner.jpg") no-repeat;
    background-size: cover;
    border-radius: 5px;
  }
}
</style>
